<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style lang="">
            html,body{
                width: 100%;
                height: 100%;
            }
            body{
                margin: 0;
                background-color: black;
                user-select: none;
                overflow: hidden;
                /* 景深 */
                perspective: 1000px;
                /* 视角 */
                perspective-origin: 70% 50%;
            }
            #main{
                width: 300px;
                height: 400px;
                margin: 150px auto;
                position: relative;
                /* 使子元素以3d形式呈现 */
                transform-style: preserve-3d;
            }
            #main > div{
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                position: absolute;
                top: 0;
                left: 0;
                /* 透明度 */
                opacity: 0.7;
                /* 改变旋转锚点 */
                transform-origin: 0 50%;
            }
            #main > div > i{
                position: absolute;
                right: 10px;
                bottom: 10px;
            }
            #main > div:nth-child(1){
                background-color: yellow;
            }
            #main > div:nth-child(2){
                background-color: red;
                transform: rotateY(-5deg);
            }
            #main > div:nth-child(3){
                background-color: green;
                transform: rotateY(-15deg);
            }
            #main > div:nth-child(4){
                background-color: blue;
                transform: rotateY(-30deg);
                padding: 0 40px;
                color: white;
                font-size: 13px;
            }
            #main > div:nth-child(4) p{
                text-indent: 2em;
            }
            #main > div:nth-child(4) h2{
                text-align: center;
            }
            #main > div:nth-child(4) > div{
                font-size: 20px;
                color: red;
                text-align: right;
            }
            #main > div:nth-child(5){
                background-color: purple;
                transform: rotateY(-50deg);
                /* transform: rotate3d(0,1,0,-50deg); */
            }
            #main > div:nth-child(5) > div{
                font-size: 20px;
                color: white;
                width: 100%;
                height: 100%;
                position: absolute;
                opacity: 1;
                background-color: #aaa;
            }
            #main > div:nth-child(5) .front{
                z-index: 1;
            }
            #main > div:nth-child(5) .back{
                transform: rotateY(180deg);
            }
            #main > div:nth-child(5):active{
                transform: rotateY(-100deg);
            }
            #main > div:nth-child(5):active .front{
                z-index: 0;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div>
                <i>4</i>
                <p>找了几圈后，房东又打了几通电话，电话那头一直是关机状态。“妈的， 这小子不会是跑了吧?”最终，没见
                        着人的房东嘟嘟囔囔的走了。
                        “好冷啊，我的床呢?这特喵的是哪?”春日的傍晚虽然已不像冬天那般寒冷，但是冰冷的地面还是把张子安
                        冻醒了。
                        双手把沉重的身体撑了起来，张子安揉了揉眼睛。甩了甩晕乎乎的脑袋，张子安疑惑打量着周围的环境。
                        沉默半分钟后，“卧槽， 这特么是哪安全，我怎么睡地上，
                        </p>
            </div>
            <div>
                <i>3</i>
                <p>张子安没什么亲人，是在福利院长大的，除了房东一个月一.次的收租外，也就没谁来这个小院了，所以院子看
                        起来有点破败。
                        “噼啪!”又一道猩红的闪电劈了下来，神乎其神的正好劈到小院左边的桂花树。冥冥中好像是故意要劈到这
                        桂花树似的，而树下恰好不好，张子安就扶着树在呕吐。
                        一阵白光闪过，地上并没有焦臭的尸体，除了那棵桂花树有些许灼痕外，好似并无些许异常。
                        .. ...
                        几天后，来收房租的房东走进院子， “张子安，醒了没，今天是二十九号。”房东趴着窗户往里瞅了
                        瞅，“咦，奇了怪了，这人往日里不都是在睡觉吗?
                        </p>
            </div>
            <div>
                <i>2</i>
                <p>晚上十一点左右的大街上熙熙攘攘的，绚丽的霓虹灯照耀着街上来来往往的行人。小吃摊旁的情侣你依我侬的
                        交谈着，一旁的酒吧里传来低沉温婉的歌声。时间偷偷的走.....
                        醉醺醺的张子安拖着两条腿回到了市郊的小院外，他刚刚结束今天的工作。抬手看了看表，已经凌晨两点了，
                        刚刚在酒吧里陪那七八个小年轻喝了不少，“今天好像有点不在状态啊”张子安一边想- -边掏出了钥匙。准备好好
                        睡一觉。
                        “轰隆隆”，漆黑的夜空响起了几声惊雷，照亮了这空寂的小院。院子里长了些杂草，两边各种了一-棵桂花
                        树，可惜不是花开的季节。                        
                        </p>
            </div>
            <div>
                <i>1</i>
                <h2>引言</h2>
                <p>矩阵在图形变换中有广泛的应用，也是图形变换的数学基础。缩放、旋转、倾斜变换只需要使用 2 x 2 矩阵，如果把平移也加入进来，将得到 2 x 3 矩阵，如果进一步扩充，可以使用一个 3 x 3 的矩阵表示所有的基本2D变换。多个变换矩阵相乘将得到组合变换的效果。3D变换也可以很方便地用 4 x 4 的矩阵表示。</p>
                <p>在图形变换过程中，普通的几何图形只需要考虑顶点即可。旋转变换时需要使用三角函数。为了在平面显示器中看到3D效果，还需要使用透视理论。</p>
                <div>智游H5教研组 编著</div>
            </div>
            <div>
                <div class="front">PHRASE 正确/不正确地看待（或判断） 
                        If you get something in perspective or into perspective, you judge its real importance by considering it in relation to everything else. If you get something out of perspective, you fail to judge its real importance in relation to everything else. </div>
                <div class="back">一种称为italic，即意大利体。我们平常说的倾斜都是指“意大利体”，这也就是为什么在各种文字处理软件上，字体倾斜的按钮上面大都使用字母“I”来表示的原因。另一种称为oblique，即真正的倾斜。这就是把一个字母向右边倾斜一定角度产生的效果，类似于图1右图显示的效果。这里说“类似于”，是因为Windows操作系统中并没有实现oblique方式的字体，只是找了一个接近它的字体来示意。</div>
            </div>
        </div>
    </body>
</html>
<script>
    var currentIndex = 4;
    var pages = document.querySelectorAll("#main>div");
    document.body.onclick = function(){
        if (currentIndex < 0) return;
        if (currentIndex == 4) pages[currentIndex].querySelector(".front").style.zIndex = "0";
        pages[currentIndex].style.transition = "all 2s";
        pages[currentIndex].style.opacity = "1";
        pages[currentIndex].style.transform = "rotateY(" + (-120 - 5*currentIndex) + "deg)";
        currentIndex--;
    }
</script>